<template>
    <div class="guidedPage">
        <!-- 登录后首页轮播图部分 -->
        <!-- <homeswiper></homeswiper> -->

        <!-- 开放公告 -->
        <model-page :selectDate="['开放公告','openInfo']" ></model-page>
        <introduceMap :outInfoArr="outInfoArr" class="introduceMap widSeting"/>

        <!-- 信息公示 -->
        <!-- <model-page :selectDate="['信息公示','Infoshow']"></model-page> -->
        <!-- <topicInfoC class="topicInfoC widSeting"/> -->

    
        <!-- 日历 -->
        <model-page :selectDate="['重大日子','Infoshow']"></model-page>
        <div class="block topicInfoC widSeting">
            <lineTime class="linetime">
                <template v-slot:slot0>
                    <p>这就是文章的意思在</p>
                </template>
                <template v-slot:slot1>
                    <el-image 
                        style="width: 100px; height: 100px"
                        :src="url" 
                        :preview-src-list="srcList">
                    </el-image>
                    <h4>这是宁外的</h4>
                    <p>123 提交于 2018/4/2 20:46</p>
                </template>
                <template v-slot:slot2>
                    <p>123 提交于 2018/4/2 20:46</p>
                </template>
            </lineTime>
            <div class="importDay">
                <div class="t-pos">
                    <calender></calender>
                </div>
                <div class="b-pos">
                    <el-collapse v-model="activeName" accordion class="bg">
                        <el-collapse-item :title="con.title" :name="i" v-for="(con,i) of newInfoArr" :key="i">
                            <div>{{con.introduce}}</div>
                            <div>{{con.publishTime}}</div>
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </div>
            
        </div>

        

        <!-- 文字介绍 -->
        <model-page :selectDate="['文字介绍','Infoshow']"></model-page>
        <div class="topicInfoC widSeting js">
            <div class="cell-js" v-for="(con,i) of hotInfoArr" :key="i">
                <el-image :src="con.imgUrls[i]"></el-image>
                <el-card class="box-card">
                    <div>
                        <!-- <p>CCTV9/国家博物馆</p> -->
                        <h3 class="artTitle">{{con.introduce}}</h3>
                        <div class="artContent" v-html="con.content"></div>
                        <a href="#" target="_blank" class="read_more">Read More &gt;&gt;</a>
                    </div>
                </el-card>
            </div>
        </div>

         <!-- 日期计算 -->
        <model-page :selectDate="['日期计算','dataInfo']" ></model-page>
        <noticeC class="noticeC widSeting"/>

        <!-- 地图导航 -->
        <model-page :selectDate="['地图导航','mapInfo']"></model-page>
        <mapC class="mapC widSeting"/>
    </div>
</template>
<style scoped>
.widSeting {
    /* width: 1258px; */
    width: 1180px;
    margin: auto;
}
.guidedPage {
    background-color: #CBC4D4;
}
.guidedPage::-webkit-scrollbar {
    width: 10px;
}
.guidedPage::-webkit-scrollbar-thumb {
    background-color: #ccc;
}
.guidedPage::-webkit-scrollbar-track {
    background-color: #ccc;
}

.introduceMap {
    height: 400px;
    position: relative;
}
.noticeC {
    height: 400px;
    position: relative;
}
.topicInfoC {
    height: 650px;
    position: relative;
}
.mapC {
    height: 500px;
    position: relative;
}
.top {
    height: 90px;
}

.block {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    padding: 1rem;
}
.linetime {
    width: 50%;
    /* background-color: #052c6e;  */
    background-color: #6A92D4;
    border-radius: 4px;
    padding-top: 3rem;
    margin-bottom: 0!important;
}
.importDay {
    width: 45%;
    display: flex;
    flex-flow: column nowrap;
    background:#fff;
    padding-top: .5rem;
    border-radius: 5px;
}
.t-pos {
    height: 55%;
}
.b-pos {
    padding: 0 3.7rem;
    height: 40%;

}
.bg div {
    background: rgb(226, 226, 231)!important;
}
.cell-js {
    display: flex;
    justify-content: space-between;
    width: 45%;
    height: 45%;
    color: white;
    padding: .5rem;
}
.cell-js >div {
    width: 50%;
}
.js {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.artTitle{
    /* height: 4rem;
    line-height: 2rem; */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
</style>
<style>
.artContent {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}
.artContent img{
    width: 0!important;
    height: 0!important;
    display: none!important;
}
</style>

<script>
import introduceMap from "../../components/yc/IntroduceMap"
import noticeC from "../../components/yc/noticeC"
import topicInfoC from "../../components/yc/topicInfoC"
import mapC from "../../components/yc/mapC"
// 导入轮播图组件
import homeswiper from "../../components/yc/homeswiper";
// 导入登录后主页 内容模块
import modelPage from '../../components/yc/modelPage';

// 导入时间线组件
import lineTime from "../../components/yc/line-time/index"

import calender from "../../components/yc/calendar"

export default {
    components:{
        introduceMap,
        noticeC,
        topicInfoC,
        mapC,
        homeswiper,
        modelPage,
        lineTime,
        calender
    },
    data(){
        return {
            value:new Date(),
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            srcList: [
            'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
            'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
            ],
            activeName: 0,
            // 公告信息
            outInfoArr:[],
            // 文字介绍 
            hotInfoArr:[],
            // 最新文章
            newInfoArr:[]
        }
    },
    created(){
        // 发送ajax请求 1为新闻
        this.$api.axios.get('/article/get/type?tid=1')
        .then(response=>{
            this.outInfoArr=response.data.data
            console.log('公告',response.data.data);
        })
        // 热门文章
        this.$api.axios.get('/article/get/hot?end=4')
        .then(response=>{
            console.log('热门文章',response.data.data);
            this.hotInfoArr=response.data.data;
        })
        // 最新文章
        this.$api.axios.get('/article/get/lately?end=3')
        .then(response=>{
            console.log('最新文章',response.data.data);
            this.newInfoArr=response.data.data;
        })
        
    }

}
</script>